<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item
          ><div class="div1">客户管理</div></el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/addCustomer' }"
          ><div class="div2">添加客户</div></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 -->
    <div class="basic">
      <p class="header">基本信息</p>
      <div class="content">
        <el-form ref="form" :inline="true" :model="form" label-width="80px">
          <el-form-item label="联系电话">
            <el-input
              maxlength="32"
              @input="inputPC"
              v-model.trim="form.phone1"
              placeholder="请输入客户电话"
            ></el-input>
          </el-form-item>
          <el-form-item label="入线方式">
            <el-select
              v-model="form.Incoming"
              filterable
              placeholder="选择入线方式"
            >
              <el-option
                v-for="item in line"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="入线时间">
            <el-date-picker
              style="width: 200px"
              v-model="form.ditchTime"
              placeholder="选择入线时间"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="客户意向">
            <el-select
              v-model="form.intention"
              filterable
              placeholder="选择客户意向"
            >
              <el-option
                v-for="items in intention"
                :key="items.id"
                :label="items.name"
                :value="items.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="客户等级">
            <el-select
              v-model="form.category"
              filterable
              placeholder="选择客户等级"
            >
              <el-option
                v-for="items in rank"
                :key="items.id"
                :label="items.name"
                :value="items.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="客户姓名">
            <el-input
              maxlength="128"
              v-model="form.name"
              placeholder="请输入客户姓名"
            ></el-input>
          </el-form-item>

          <el-form-item label="客户性别">
            <el-select v-model="form.sex" placeholder="选择性别">
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="2"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="客户年龄">
            <el-input-number
              :max="128"
              :min="0"
              :controls="false"
              v-model="form.age"
              placeholder="请输入客户年龄"
            ></el-input-number>
          </el-form-item>

          <el-form-item label="联系二">
            <el-input
              maxlength="32"
              v-model="form.phone2"
              placeholder="请输入客户电话"
            ></el-input>
          </el-form-item>
          <el-form-item label="公司">
            <el-input
              maxlength="52"
              v-model="form.company"
              placeholder="请输入公司"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="门店">
            <el-input
              maxlength="52"
              v-model="form.gateSentry"
              placeholder="请输入门店"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="地址">
            <levelAddr
              class="addressContent"
              :province="form.province"
              :city="form.city"
              :area="form.area"
              @updateprovice="getAddrData"
              @updatecity="getCity"
              @updatearea="getArea"
            ></levelAddr>
          </el-form-item>

          <el-form-item label="详细地址">
            <el-input
              maxlength="255"
              class="address"
              v-model="form.address"
              @blur="getAddObj"
              @keydown.enter.native="getAddObj"
              placeholder="请输入客户详细地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-checkbox-group v-model="resource" @change="checkbox">
              <el-checkbox
                label="同步收货地址"
                :true-label="1"
                :false-label="0"
                name="type"
              ></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="receipt">
      <p class="header">收货地址</p>
      <div class="determination">
        <el-form
          ref="address"
          :inline="true"
          :model="address"
          label-width="100px"
        >
          <el-form-item label="收货人姓名">
            <el-input
              maxlength="128"
              v-model="address.name"
              placeholder="请输入客户姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input
              maxlength="32"
              v-model.trim="address.phone"
              placeholder="请输入收货电话"
            ></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <levelAddr
              :province="address.province"
              :city="address.city"
              :area="address.area"
              class="addressContent"
              @updateprovice="getAddrData1"
              @updatecity="getCity1"
              @updatearea="getArea1"
            ></levelAddr>
          </el-form-item>

          <el-form-item label="详细地址">
            <el-input
              maxlength="255"
              class="address"
              v-model="address.address"
              placeholder="请输入客户详细地址"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="btn">
      <el-button type="primary" @click="preserveEvent('')">保存</el-button>
      <el-button type="primary" @click="preserveEvent(1)"
        >保存并添加订单</el-button
      >
    </div>
  </div>
</template>

<script>
import levelAddr from "@/components/levelAddr";
import $ from "jquery";
// import func from "../../../vue-temp/vue-editor-bridge";
export default {
  components: {
    levelAddr: levelAddr,
  },
  data () {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "此刻",
            onClick (picker) {
              picker.$emit("pick", new Date());
            },
          },
        ],
        disabledDate (time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
      },
      form: {
        Incoming: "",
        ditchTime: "",
        intention: "",
        category: "",
        service: "",
        name: "",
        phone1: "",
        phone2: "",
        timer: "",
        address: "",
        province: "",
        provinceId: "",
        city: "",
        cityId: "",
        area: "",
        areaId: "",
        resource: 0,
        sex: "1",
        age: 18,
        company: "",
        gateSentry: "",
      },
      address: {
        name: "",
        phone: "",
        province: "",
        provinceId: "",
        cityId: "",
        city: "",
        area: "",
        areaId: "",
        address: "",
      },
      //接收数据
      line: [],
      intention: [],
      rank: [],
      resource: 0,
    };
  },
  created () {
    this.commentAxios();
  },
  methods: {
    //自动解析地址三级联动
    getAddObj () {
      this.form.address = this.form.address.replaceAll(" ", "");
      $.get(
        "http://120.24.147.235:3002/test",
        { addr: this.form.address },
        (res) => {
          let addrObj = res.message;
          if (
            this.form.address.indexOf(
              addrObj.province + addrObj.city + addrObj.county
            ) === 0
          ) {
            this.updateAddr(addrObj);
          } else {
            var t = 0;
            this.form.address.indexOf(addrObj.province) === 0 ? t++ : (t = t);
            this.form.address.indexOf(addrObj.city) != -1 ? t++ : (t = t);
            this.form.address.indexOf(addrObj.county) != -1 ? t++ : (t = t);
            if (t >= 2) {
              this.updateAddr(addrObj);
            }
          }
        }
      );
    },
    updateAddr (e) {
      this.form.province = e.province;
      this.form.city = e.city;
      this.form.area = e.county;
      console.log(this.form);
      this.form.address = this.form.address.replace(this.form.province, "");
      this.form.address = this.form.address.replace(this.form.city, "");
      this.form.address = this.form.address.replace(this.form.area, "");
    },
    inputPC (e) {
      if (e.length == 11) {
        this.axios
          .get("/order/comm/customeruser/getBelongingTo?phone=" + e, {
            headers: {
              isLoading: false,
            },
          })
          .then((res) => {
            this.form.province = res.data[0].province;
            this.form.city = res.data[0].city;
          });

        // 根据手机号获取渠道id
        if (JSON.parse(sessionStorage.getItem("salesAuthorityId")) == "1") {
          this.axios
            .get("/order/wsCustomerChannelUser/getChannelIdByPhone?phone=" + e)
            .then((res) => {
              if (res.code == 0) {
                if (res.data) {
                  this.form.Incoming = res.data.channelId;
                  this.form.name = res.data.customerName;
                  this.form.ditchTime = res.data.createdTime;
                } else {
                  this.form.Incoming = "";
                  this.form.name = "";
                  this.form.ditchTime = "";
                }
              }
            });
        }
      } else {
        this.form.province = "";
        this.form.city = "";
      }
    },
    //** 普通数据请求 **//
    commentAxios () {
      //入线方式
      this.axios
        .get("/order/comm/customeruser/selectCustomerditch", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          // console.log(res)
          if (res.code == 0) {
            this.line = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
      /*意向*/
      this.axios
        .post(
          "/order/comm/customeruser/selectCustomerintention",
          {
            salesAuthorityId: JSON.parse(
              sessionStorage.getItem("salesAuthorityId")
            ),
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          // console.log(res)
          if (res.code == 0) {
            this.intention = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
      /*等级*/
      this.axios
        .get("/order/comm/customeruser/selectCustomerlevel", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          // console.log(res)
          if (res.code == 0) {
            this.rank = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    //** 普通数据请求 **//
    //**保存资料**//
    preserveEvent: _.debounce(function (param) {
      if (this.form.Incoming == "") {
        this.$message.warning("入线方式未选择");
      } else if (this.form.intention == "") {
        this.$message.warning("客户意向未选择");
      } else if (this.form.category == "") {
        this.$message.warning("客户等级未选择");
      } else if (this.form.name == "") {
        this.$message.warning("客户姓名为空");
      } else if (this.form.phone1 == "") {
        this.$message.warning("客户联系方式为空");
      } else if (
        this.form.phone1.length != 11 ||
        !this.judgeIsNum(this.form.phone1)
      ) {
        this.$message.warning("客户电话号码不正确");
      } else if (this.form.province == "" || this.form.city == "") {
        this.$message.warning("用户住址省-市不能为空");
      } else if (this.form.address == "") {
        this.$message.warning("用户详细住址不能为空");
      } else if (this.address.name == "") {
        this.$message.warning("收货人姓名为空");
      } else if (
        this.address.phone.length != 11 ||
        !this.judgeIsNum(this.address.phone)
      ) {
        this.$message.warning("收货人电话不正确");
      } else if (this.address.province == "" || this.address.city == "") {
        this.$message.warning("省-市不能为空");
      } else if (this.address.address == "") {
        this.$message.warning("详细收货不能为空");
      } else {
        let call = "";
        if (this.form.phone2 == undefined || this.form.phone2 == "") {
          call = this.form.phone1;
        } else {
          call = this.form.phone1 + "," + this.form.phone2;
        }
        this.axios
          .post(
            "/order/comm/customeruser/add",
            {
              customerAddress: {
                address:
                  this.address.province + this.address.city + this.address.area,
                cityCode: this.address.city ? this.address.city : "",
                createdBy: sessionStorage.getItem("user_id"),
                customerId: sessionStorage.getItem("user_id"), //客户
                detailedAddress: this.address.address,
                id: "",
                isDefault: 1,
                phone: this.address.phone,
                provinceCode: this.address.province
                  ? this.address.province
                  : "",
                regionCode: this.address.area ? this.address.area : "",
                sort: 0,
                userName: this.address.name,
              },
              customerUser: {
                //用户信息
                address: this.form.province + this.form.city + this.form.area,
                cityCode: this.form.city,
                createdBy: sessionStorage.getItem("user_id"),
                customerId: sessionStorage.getItem("user_id"), //客服
                detailedAddress: this.form.address,
                id: "",
                phone: call,
                provinceCode: this.form.province,
                regionCode: this.form.area,
                userDitch: this.form.Incoming, //入线渠道
                userIntention: this.form.intention, //客户意向
                userLevel: this.form.category,
                userName: this.form.name,
                age: this.form.age,
                gender: this.form.sex,
                ditchTime: this.form.ditchTime,
                company: this.form.company,
                gateSentry: this.form.gateSentry,
              },
              value: this.resource, //是否同步添加收货地址（0:不添加 1:添加）
            },
            {
              headers: {
                isLoading: true,
              },
            }
          )
          .then((res) => {
            // console.log(res);
            if (res.code == 0) {
              if (param == 1) {
                this.$router.push({
                  name: "add_order",
                  query: { pingZ: true, userId: res.data },
                });
                this.$message.success("信息保存成功");
              } else {
                this.$router.push({ name: "myCustomers" });
                this.$message.success("添加成功");
              }
            } else {
              this.$message.error(res.message);
            }
          });
      }
    }, 500),
    //**保存资料**//
    /**同步地址**/
    checkbox (value) {
      if (value == 1) {
        this.address.name = this.form.name;
        this.address.phone = this.form.phone1;
        this.address.province = this.form.province;
        this.address.provinceId = this.form.province;
        this.address.cityId = this.form.city;
        this.address.city = this.form.city;
        this.address.area = this.form.area;
        this.address.areaId = this.form.area;
        this.address.address = this.form.address;
      } else {
        this.address.name = "";
        this.address.phone = "";
        this.address.province = "";
        this.address.provinceId = "";
        this.address.cityId = "";
        this.address.city = "";
        this.address.area = "";
        this.address.areaId = "";
        this.address.address = "";
      }
    },
    getAddrData (val) {
      this.form.province = val;
      this.form.city = "";
      this.form.area = "";
    },
    getCity (val) {
      this.form.city = val;
      this.form.area = "";
    },
    getArea (val) {
      this.form.area = val;
    },

    getAddrData1 (val) {
      this.address.province = val;
      this.address.provinceId = val;
    },
    getCity1 (val) {
      this.address.city = val;
      this.address.cityId = val;
    },
    getArea1 (val) {
      this.address.area = val;
      this.address.areaId = val;
    },
  },
  watch: {
    form: {
      handler (newVal, oldVal) {
        let temp = false;
        if (newVal.Incoming == "") {
          temp = false;
        } else if (newVal.category == "") {
          temp = false;
        } else if (newVal.name == "") {
          temp = false;
        } else if (newVal.phone1 == "") {
          temp = false;
        } else if (newVal.phone1.length != 11) {
          temp = false;
        } else if (newVal.province == "" && newVal.city == "") {
          temp = false;
        } else if (newVal.address == "") {
          temp = false;
        } else {
          temp = true;
        }
        if (temp) {
          this.resource = 1;
          this.address.name = this.form.name;
          this.address.phone = this.form.phone1;
          this.address.province = this.form.province;
          this.address.provinceId = this.form.province;
          this.address.cityId = this.form.city;
          this.address.city = this.form.city;
          this.address.area = this.form.area;
          this.address.areaId = this.form.area;
          this.address.address = this.form.address;
        } else {
          this.resource = 0;
          this.address.name = "";
          this.address.phone = "";
          this.address.province = "";
          this.address.provinceId = "";
          this.address.cityId = "";
          this.address.city = "";
          this.address.area = "";
          this.address.areaId = "";
          this.address.address = "";
        }
        if (this.resource) {
          this.resource = 1;
          this.address.name = this.form.name;
          this.address.phone = this.form.phone1;
          this.address.province = this.form.province;
          this.address.provinceId = this.form.province;
          this.address.cityId = this.form.city;
          this.address.city = this.form.city;
          this.address.area = this.form.area;
          this.address.areaId = this.form.area;
          this.address.address = this.form.address;
        }
      },
      deep: true,
    },
  },
};
</script>

<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  background: url(../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}
.div2 {
  margin-left: -16px;
  background: url(../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}
.basic {
  background-color: #fff;
  padding: 10px;
}
.btn {
  background-color: #fff;
  padding: 20px 10px;
  margin-top: 20px;
}
.determination {
  margin-top: 10px;
}
/deep/.el-button {
  padding: 10px 14px;
  margin-left: 30px;
}
.header {
  font-size: 16px;
  color: #2d7edf;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
/deep/.el-input__inner {
  width: 200px;
  height: 30px;
  line-height: 30px;
}
.addressContent /deep/.el-input__inner {
  width: 180px;
  height: 30px;
  line-height: 30px;
}
.address {
  width: 400px;
  /deep/.el-input__inner {
    width: 400px;
  }
}
/deep/ .el-date-editor .el-range__icon {
  line-height: 23px;
}
/deep/ .el-date-editor .el-range-separator {
  line-height: 23px;
}
/deep/.el-date-editor .el-range__close-icon {
  line-height: 22px;
}
/deep/.distpicker-address-wrapper select {
  padding: 0rem 0.75rem;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
}
.receipt {
  padding: 10px;
  background: #fff;
  margin-top: 20px;
}
</style>
